<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();

runAfterLayoutAndPaint(function() {
  document.getElementById('c1').setAttribute('r', 0);
  document.getElementById('c2').setAttribute('r', -50);
  if (window.testRunner)
    testRunner.notifyDone();
});
</script>
<svg width="200" height="100">
  <rect width="200" height="100" fill="green"/>
  <circle id="c1" cx="50" cy="50" r="50" stroke="red" fill="red" vector-effect="non-scaling-stroke"/>
  <circle id="c2" cx="150" cy="50" r="50" stroke="red" fill="red" vector-effect="non-scaling-stroke"/>
</svg>
